import React, { useState,useEffect } from 'react'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useLocation
} from "react-router-dom"
import routes from '@/router'
import { ConfigProvider } from "antd-mobile";
import zhCN from 'antd-mobile/es/locales/zh-CN'
// import './App.css'
import NavBar from '@/container/components/NavBar';
import styles from './app.module.less';

function App() {
  const location = useLocation()
  const { pathname } = location
  console.log('pathname',pathname);
  
  const needNav = ['/','/data','/user']
  const [count, setCount] = useState(0)
  const [showNav, setShowNav] = useState(false)

  useEffect(()=>{
    setShowNav(needNav.includes(pathname))
  },[pathname])

  return (
    <>
      <ConfigProvider locale={zhCN}>
        <div className={styles.app}>
          <div className={styles.top}>
            {/* <NavBar>配合路由使用</NavBar> */}
          </div>
          <div className={styles.body}>
              <Routes>
                {
                  routes.map(route => <Route exact key={route.path} path={route.path} element={<route.component />} />)
                }
              </Routes>
            
          </div>
          <div className={styles.bottom}>
           <NavBar showNav={showNav} />
          </div>
        </div>
      </ConfigProvider>
    </>
  )
}

export default App
